<template>
	<view class="home">
		<view class="homeCard">
			
		</view>
		<view class="homeBtnWrap">
			<view class="homeBtn active">全部</view>
			<view class="homeBtn">支出</view>
			<view class="homeBtn">收入</view>
		</view>
		<view class="homeContent">
			<view class="hcTop">
				<text class="hcTopTitle">10月15日</text>
				<view class="hcTopInfo">
					<view class="hcTopIcon">支</view>
					<text>681.00</text>
				</view>
			</view>
			<view class="billLst">
				<view class="billItem" v-for="(item,key) in billLst" :key="item.id">
					<view class="billTitle">
						<image class="billIcon" src="https://iconfont.alicdn.com/t/c5e0595f-f04a-4c97-bab5-7e7094d48418.jpg" mode=""></image>
						<view class="billTxt">
							<text>{{item.type}}</text>
							<text>{{item.name}}</text>
						</view>
					</view>
					<view class="billNum">{{item.num}}.00</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'Index',
	components: {
	},
	data() {
		return {
			billLst:[]
		}
	},
	methods: {
		getUser(){
			this.$request('/api/getbillLst', {}).then(res => {
				// 打印调用成功回调
				this.billLst = res.list
			}).catch(err => {
				console.log(err)
			})
		}
	},
	onReady(){
	    this.getUser()
	},
};
</script>

<style scoped lang="scss">
$themeColor:#f4766a;
$txtColor:#c1bebd;
$darkColor:#454545;
.home{
	padding:0 15px;
	color:$txtColor;
	font-family: '微软雅黑';
	background-color: #f6f6f6;
	min-height: 100%;
	height: 100%;
	box-sizing: border-box;
}
.homeBtnWrap{
	display: flex;
	.homeBtn{
			font-size: 12px;
			color: $txtColor;
			padding:3px 15px;
			border-radius: 10px;
			&.active{
				color:#fff;
				background-color: $darkColor;
			}
	}	
}
.homeContent{
	margin-top:15px;
	.hcTop{
		display: flex;
		justify-content: space-between;
		font-size: 14px;	
		.hcTopInfo{
			font-size: 12px;
			display: flex;
			align-items: center;
			.hcTopIcon{
				background-color: $themeColor;
				border-radius: 100%;
				color:#fff;
				width:18px;
				height: 18px;
				text-align: center;
				line-height: 18px;
				font-size: 12px;
				margin-right: 5px;
			}
		}
	}
	.billLst{
		.billItem{
			padding:15px;
			background-color: #fff;
			border-radius: 5px;
			margin:13px auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.billTitle{
				display: flex;
				.billIcon{
					width:50px;
					background-color: red;
					height: 50px;
				}
				.billTxt{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					text:nth-child(1){
						color:$darkColor;
						font-weight: 700;
						margin-bottom: 5px;
					}
					text:nth-child(2){
						font-size:12px;
					}
				}
			}
			.billNum{
				color:$darkColor;
				font-weight: 700;
			}
		}
	}

}
</style>
